<template>
  <div class="article-list">
    <el-card v-for="item in dataList" :key="item.id">
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="grid-content bg-purple">
            <div style="height: 120px; overflow: hidden">
              <img 
                v-if="item.article.titlepic"
                :src="domain + item.article.titlepic"
                alt
                style="width: 100%; height: 100%"
              />
            </div>
          </div>
        </el-col>
        <el-col :span="18">
          <el-link style="height: 3em;" :underline="false" :href="domain + getDateUrl(item.article.create_time, item.article.id)" target="_blank">
            <h2>
              {{ item.article.title }}
            </h2>
          </el-link>
          <div style="margin-top: 10px;"><span>{{ item.article.summary }}</span></div>
          <div style="margin-top: 10px;">
            <span>发布日期:{{ item.article.pubtime }}</span>
            <el-link type="primary" :underline="false" style="margin-left: 20px;" :href="domain + item.category_url" target="_blank">{{ item.category_name }}</el-link> 
          </div>
        </el-col>
      </el-row>
    </el-card>
    <el-card>
      <div class="text-center" style="margin-top: 30px">
        <el-pagination
          :background="true"
          layout="total, sizes, prev, pager, next, jumper"
          v-model:current-page="pageIndex"
          v-model:page-size="pageSize"
          :total="totalCount"
          :page-sizes="pageSizes"
        ></el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "Hit",
  data() {
    return {
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalCount: 0,
      pageSizes: [10, 30, 100],
    };
  },
  mounted() {
    this.getDataList();
  },
  methods: {
    getDataList() {
      this.$http.get(
        "/member/hitList",
        {
          page: this.pageIndex,
          limit: this.pageSize,
        },
        (res) => {
          if (res && res.code === 0) {
            this.dataList = res.data.data
            this.totalCount = res.data.total
            // console.log(this.dataList);
          }
        }
      );
    },
    // 格式化文章发布时间访问路径
    getDateUrl(date, id) {
      return '/' + date.split(" ")[0].replaceAll("-","/") + '/' + id
    }
  },
  watch: {
    pageIndex: "getDataList",
    pageSize: "getDataList",
  },
};
</script>

<style lang="scss">
</style>